<template>
	<div class="container">
		<headbox :title="title"></headbox>
		<div class="context">
			<div class="context_1">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>报名表</span>
					</div>
					<div class="inner">
						<div>
							<p>作品类别:&nbsp;软件应用与开发-移动应用开发（非游戏类）</p>
						</div>
						<div>
							<p>作品编号:&nbsp;2021009308</p>
						</div>
						<div>
							<el-form :model="pro_name" :rules="rules" label-position="right" label-width="80px">
								<el-form-item label="作品名称" prop="name">
									<el-input v-model="pro_name.name" type="text" class="inputbox"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="save">保存</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</el-card>
			</div>
			<div class="context_2">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>学校推荐意见</span>
					</div>
					<div class="inner">
						<wangeditor class="wang" ref="wangeditor"></wangeditor>
						<el-button type="primary" size="mini" @click="saveSchoolOpt">保存学校推荐意见</el-button>
					</div>
				</el-card>
			</div>
			<div class="context_3">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>作者管理</span>
						<el-button @click="saveAllAutor" style="float: right;margin-right: 3px;" size="small" type="primary">保存全部</el-button>
						<el-button @click="addAutor" style="float: right;margin-right: 3px;" size="small" type="primary">添加作者</el-button>
					</div>
					<div class="inner">
						<div v-for="(item,index) in autor" :key="index" class="inputbox">
							<div class="top">
								<el-button size="small" :icon="item.iconpic" @click="trigger('autor',index)" circle>
								</el-button>
								作者{{index+1}}
							</div>
							<transition name="slideTrigger">
								<div class="down" v-show="item.show">
									<el-form :rules="rules" :model="students[index]" label-position="right"
										label-width="90px">
										<el-form-item label="作者姓名" prop="name">
											<el-input v-model="students[index].name" type="text"></el-input>
										</el-form-item>
										<el-form-item label="专业类别" prop="name">
											<el-input v-model="students[index].profession" type="text"></el-input>
										</el-form-item>
										<el-form-item label="学历">
											<el-select v-model="students[index].education" placeholder="请选择活动区域">
												<el-option label="本科" value="本科"></el-option>
												<el-option label="高职" value="高职"></el-option>
												<el-option label="硕士" value="硕士"></el-option>
												<el-option label="博士" value="博士"></el-option>
												<el-option label="其他" value="其他"></el-option>
											</el-select>
										</el-form-item>
										<el-form-item label="年级" prop="name">
											<el-input v-model="students[index].class" type="text"></el-input>
										</el-form-item>
										<el-form-item label="邮箱" prop="name">
											<el-input v-model="students[index].email" type="text"></el-input>
										</el-form-item>
										<el-form-item label="手机" prop="name">
											<el-input v-model="students[index].phone" type="text"></el-input>
										</el-form-item>
										<el-form-item label="证件类型" prop="name">
											<el-input v-model="students[index].idtype" type="text"></el-input>
										</el-form-item>
										<el-form-item label="证件号" prop="name">
											<el-input v-model="students[index].idnum" type="text"></el-input>
										</el-form-item>
										<el-form-item label="学号" prop="name">
											<el-input v-model="students[index].stuid" type="text"></el-input>
										</el-form-item>
										<el-form-item label="作者照片">
											<el-upload class="upload-demo"
												action="https://jsonplaceholder.typicode.com/posts/"
												:file-list="students[index].pic" list-type="picture">
												<el-button size="small" type="primary">点击上传</el-button>
												<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
											</el-upload>
										</el-form-item>
										<el-form-item label="学生证照片">
											<el-upload class="upload-demo"
												action="https://jsonplaceholder.typicode.com/posts/"
												:file-list="students[index].pic_stu" list-type="picture">
												<el-button size="small" type="primary">点击上传</el-button>
												<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
											</el-upload>
										</el-form-item>
										<el-form-item>
											<el-button @click="saveAutor(index)" type="primary">保存</el-button>
											<el-button @click="deleteAutor(index)" type="danger">删除该作者</el-button>
										</el-form-item>
									</el-form>
								</div>
							</transition>
						</div>
					</div>
				</el-card>
			</div>
			<div class="context_4">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>指导老师管理</span>
						<el-button @click="saveAllTeacher" style="float: right;margin-right: 3px;" size="small" type="primary">保存全部</el-button>
						<el-button @click="addTeacher" style="float: right;margin-right: 3px;" size="small" type="primary">添加指导老师
						</el-button>
					</div>
					<div class="inner">
						<div v-for="(item,index) in teacher" :key="index" class="inputbox">
							<div class="top">
								<el-button size="small" :icon="item.iconpic" @click="trigger('teacher',index)" circle>
								</el-button>
								教师{{index+1}}
							</div>
							<transition name="slideTrigger">
								<div class="down" v-show="item.show">
									<el-form :rules="rules" :model="teachers[index]" label-position="right"
										label-width="90px">
										<el-form-item label="姓名" prop="name">
											<el-input v-model="teachers[index].name" type="text"></el-input>
										</el-form-item>
										<el-form-item label="学校" prop="name">
											<el-input v-model="teachers[index].school" type="text"></el-input>
										</el-form-item>
										<el-form-item label="手机" prop="name">
											<el-input v-model="teachers[index].phone" type="text"></el-input>
										</el-form-item>
										<el-form-item label="邮箱" prop="name">
											<el-input v-model="teachers[index].email" type="text"></el-input>
										</el-form-item>
										<el-form-item label="职称" prop="name">
											<el-input v-model="teachers[index].call" type="text"></el-input>
										</el-form-item>
										<el-form-item label="工作证图片">
											<el-upload class="upload-demo"
												action="https://jsonplaceholder.typicode.com/posts/"
												:file-list="teachers[index].pic" list-type="picture">
												<el-button size="small" type="primary">点击上传</el-button>
												<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
											</el-upload>
										</el-form-item>
										<el-form-item>
											<el-button @click="saveTeacer(index)" type="primary">保存</el-button>
											<el-button @click="deleteTeacher(index)" type="danger">删除该指导教师</el-button>
										</el-form-item>
									</el-form>
								</div>
							</transition>
						</div>
					</div>
				</el-card>
			</div>
			<div class="context_5">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>领队教师管理</span>
						<el-button @click="addLeader" style="float: right;margin-right: 3px;" size="small" type="primary">添加指导老师
						</el-button>
					</div>
					<div class="inner">
						<div v-for="(item,index) in leader" :key="index" class="inputbox">
							<div class="top">
								<el-button size="small" :icon="item.iconpic" @click="trigger('leader',index)" circle>
								</el-button>
								领队{{index+1}}
							</div>
							<transition name="slideTrigger">
								<div class="down" v-show="item.show">
									<el-form :rules="rules" :model="leaders[index]" label-position="right"
										label-width="90px">
										<el-form-item label="姓名" prop="name">
											<el-input v-model="leaders[index].name" type="text"></el-input>
										</el-form-item>
										<el-form-item label="职务" prop="name">
											<el-input v-model="leaders[index].profession" type="text"></el-input>
										</el-form-item>
										<el-form-item label="手机" prop="name">
											<el-input v-model="leaders[index].phone" type="text"></el-input>
										</el-form-item>
										<el-form-item label="邮箱" prop="name">
											<el-input v-model="leaders[index].email" type="text"></el-input>
										</el-form-item>
										<el-form-item label="邮编" prop="name">
											<el-input v-model="leaders[index].postcode" type="text"></el-input>
										</el-form-item>
										<el-form-item label="地址" prop="name">
											<el-input v-model="leaders[index].address" type="text"></el-input>
										</el-form-item>
										<el-form-item>
											<el-button @click="saveLeader(index)" type="primary">保存</el-button>
											<el-button @click="deleteLeader(index)" type="danger">删除该领队</el-button>
										</el-form-item>
									</el-form>
								</div>
							</transition>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	import headbox from './head.vue'
	import wangeditor from '../wangEditor.vue'
	export default {
		data() {
			return {
				title: '报名表',
				pro_name: {
					name: ''
				},
				rules: {
					name: {
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}
				},
				autor: [{
					show: false, //显示作者控件
					iconpic: 'el-icon-arrow-right', //作者图标
				}],
				teacher: [{
					show: false, //显示控件
					iconpic: 'el-icon-arrow-right' //图标
				}],
				leader: [{
					show: false, //显示控件
					iconpic: 'el-icon-arrow-right' //图标
				}],
				students: [{
					name: '',
					profession: '',
					education: '',
					class: '',
					phone: '',
					idtype: '',
					idnum: '',
					stuid: '',
					pic: [],
					pic_stu: []
				}],
				teachers: [{
					name: '',
					school: '',
					phone: '',
					email: '',
					call: '',
					pic: [],
				}],
				leaders: [{
					name: '',
					profession: '',
					phone: '',
					email: '',
					postcode: '',
					address: '',
				}],
				schooladvice:'',//学校建议
			}
		},
		methods: {
			save() {
				console.log(this.pro_name.name);
				this.$message({message:'保存成功',type:'success'})
			},
			saveSchoolOpt() {
				console.log(this.$refs.wangeditor.gethtml(),'学校推荐意见')
				this.$message({message:'保存学校推荐意见',type:'success'})
			},
			//展开动画
			trigger(peop, index) {
				if (peop == 'autor') {
					this.autor[index].show = !this.autor[index].show
					if (this.autor[index].show) {
						this.autor[index].iconpic = 'el-icon-arrow-down'
					} else {
						this.autor[index].iconpic = 'el-icon-arrow-right'
					}
				}
				if (peop == 'teacher') {
					this.teacher[index].show = !this.teacher[index].show
					if (this.teacher[index].show) {
						this.teacher[index].iconpic = 'el-icon-arrow-down'
					} else {
						this.teacher[index].iconpic = 'el-icon-arrow-right'
					}
				}
				if (peop == 'leader') {
					this.leader[index].show = !this.leader[index].show
					if (this.leader[index].show) {
						this.leader[index].iconpic = 'el-icon-arrow-down'
					} else {
						this.leader[index].iconpic = 'el-icon-arrow-right'
					}
				}
			},
			//添加作者
			addAutor(){
				this.autor.push({
					show: false, //显示作者控件
					iconpic: 'el-icon-arrow-right', //作者图标
				})
				this.students.push({
					name: '',
					profession: '',
					education: '',
					class: '',
					phone: '',
					idtype: '',
					idnum: '',
					stuid: '',
					pic: [],
					pic_stu: []
				})
				this.$message({message:'添加作者成功',type:'success'})
			},
			//删除作者
			deleteAutor(index){
				this.autor.splice(index,1)
				this.students.splice(index,1)
			},
			saveAutor(index){
				console.log(this.students[index],'saveAutor');
			},
			saveAllAutor(){
				for(var i=0;i<this.students.length;i++){
					this.saveAutor(i)
				}
				console.log(this.students,'saveAllAutor');
			},
			//添加老师
			addTeacher(){
				this.teacher.push({
					show: false, 
					iconpic: 'el-icon-arrow-right',
				})
				this.teachers.push({
					name: '',
					school: '',
					phone: '',
					email: '',
					call: '',
					pic: [],
				})
				this.$message({message:'添加指导老师成功',type:'success'})
			},
			//删除老师
			deleteTeacher(index){
				this.teacher.splice(index,1)
				this.teachers.splice(index,1)
			},
			saveTeacer(index){
				console.log(this.teachers[index],'saveTeacer');
			},
			saveAllTeacher(){
				for(var i=0;i<this.teachers.length;i++){
					this.saveAutor(i)
				}
				console.log(this.teachers,'saveAllTeacher');
			},
			//添加领队
			addLeader(){
				this.leader.push({
					show: false, 
					iconpic: 'el-icon-arrow-right',
				})
				this.leaders.push({
					name: '',
					profession: '',
					phone: '',
					email: '',
					postcode: '',
					address: '',
				})
				this.$message({message:'添加领队成功',type:'success'})
			},
			//删除领队
			deleteLeader(index){
				this.leader.splice(index,1)
				this.leaders.splice(index,1)
			},
			saveLeader(index){
				console.log(this.leaders[index],'saveLeader');
			}
		},
		components: {
			headbox,
			wangeditor
		},
		mounted() {

		}
	}
</script>

<style>
	.container {
		display: flex;
	}

	.container .context {
		flex: 1;
	}

	.context_1 {
		margin-bottom: 10px;
	}

	.inner {
		padding-left: 10px;
		width: calc(70vw);
	}

	.inner p {
		font-size: 15px;
	}

	.context_2 {
		margin-bottom: 10px;
	}

	.context_2 .inner {
		width: calc(70vw);
	}

	.wang {
		margin-bottom: 5px;
	}

	.context_3 {
		margin-bottom: 10px;
	}

	.context_3 .inner {
		width: calc(70vw);
	}

	.context_3 .inner .inputbox {
		border: 1px solid #FFFFFF;
		width: auto;
	}

	.context_3 .inner .inputbox .top {
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		margin-bottom: 5px;
		background-color: #F0F0F0;
	}

	.context_3 .inner .inputbox .down {
		width: calc(40vw);
	}

	.context_4 {
		margin-bottom: 10px;
	}

	.context_4 .inner {
		width: calc(70vw);
	}

	.context_4 .inner .inputbox {
		border: 1px solid #FFFFFF;
		width: auto;
	}

	.context_4 .inner .inputbox .top {
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		margin-bottom: 5px;
		background-color: #F0F0F0;
	}
	
	.context_4 .inner .inputbox .down{
		width: calc(40vw);
	}

	.context_5 {
		margin-bottom: 10px;
	}

	.context_5 .inner {
		width: calc(70vw);
	}

	.context_5 .inner .inputbox {
		border: 1px solid #FFFFFF;
		width: auto;
	}

	.context_5 .inner .inputbox .top {
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		margin-bottom: 5px;
		background-color: #F0F0F0;
	}
	.context_5 .inner .inputbox .down{
		width: calc(40vw);
	}

	.slideTrigger-enter,
	.slideTrigger-leave-to {
		max-height: 0;
	}

	.slideTrigger-enter-to,
	.slideTrigger-leave {
		max-height: 786px;
	}

	.slideTrigger-enter-active,
	.slideTrigger-leave-active {
		transition: all .1s ease-out;
	}

	.inputbox {
		width: calc(25vw);
	}
</style>
